<template>
  <view class="container">
    <view class="bg-set"></view>
    <view class="profile">
      <view class="title">
        <view style="font-weight: 700;">食堂配送</view>
        <view style="margin: 10rpx 0;">订单15分钟未支付，将自动取消</view>
        <uni-countdown :show-day="false"  :minute="15" :second="0" color="#fff" splitorColor="#fff"></uni-countdown>
      </view>
     <view class="kk">
       <!-- 取货信息 -->
       <uni-card padding="0" spacing="0" margin="10rpx">
        <uni-list>
          <uni-list-item>
            <template v-slot:header>
              <view style="font-weight: 700;color: black;">取货信息</view>
            </template>
          </uni-list-item>
          <uni-list-item title="商家名称">
            <template v-slot:footer>
              <view>营养餐厅</view>
            </template>
          </uni-list-item>
          <uni-list-item title="商家电话">
            <template v-slot:footer>
              <view class="call">
                <view>110</view>
                <view class="btn">拨号</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item title="商家地址">
            <template v-slot:footer>
              <view>浙江省宁波市海曙区</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-card>
      <!-- 下单信息 -->
      <uni-card padding="0" spacing="0" margin="10rpx">
        <uni-list>
          <uni-list-item>
            <template v-slot:header>
              <view style="font-weight: 700;color: black;">下单信息</view>
            </template>
          </uni-list-item>
          <uni-list-item title="联系人">
            <template v-slot:footer>
              <view>哈士奇</view>
            </template>
          </uni-list-item>
          <uni-list-item title="电话">
            <template v-slot:footer>
              <view class="call">
                <view>联系人电话110</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item title="地址">
            <template v-slot:footer>
              <view>综合楼17楼干部科一区军人7号床</view>
            </template>
          </uni-list-item>
          <uni-list-item title="备注" />
          <uni-list-item title="就餐方式">
            <template v-slot:footer>
              <view class="mode">配送</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-card>
      <!-- 餐别 -->
      <uni-card padding="0" spacing="0" margin="10rpx">
        <uni-list>
          <uni-list-item>
            <template v-slot:header>
              <view style="display: flex;align-items: center;">
                <view style="font-weight: 700;color: black;margin-right: 30rpx;">午餐</view>
                <image src="../../static/images/index_1.png" style="width: 65rpx;
          height: 65rpx;" />
              </view>
            </template>
          </uni-list-item>
          <uni-list-item title="商品小计">
            <template v-slot:footer>
              <view>￥ 0.10</view>
            </template>
          </uni-list-item>
          <uni-list-item>
            <template v-slot:footer>
              <text>已优惠 ￥0</text>
              <text style="font-weight: 700;color: black;margin-left: 20rpx;">合计 ￥ 0.10</text>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-card>
      <!-- 订单信息 -->
      <uni-card padding="0" spacing="0" margin="10rpx">

        <uni-list>
          <uni-list-item>
            <template v-slot:header>
              <view style="font-weight: 700;color: black;">订单信息</view>
            </template>
          </uni-list-item>
          <uni-list-item title="订单编号">
            <template v-slot:footer>
              <view>merge-20230606145432115358336-1</view>
            </template>
          </uni-list-item>
          <uni-list-item title="下单时间">
            <template v-slot:footer>
              <view>2023-06-06 18：12：00</view>
            </template>
          </uni-list-item>

        </uni-list>

      </uni-card>
     </view>

      <view class="btnpay">
        <view class="btnleft">取消订单</view>
        <view class="btnright" @click="onConfirm">立即支付</view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 点击立即支付跳转订单支付页面
const onConfirm=()=>{
uni.navigateTo({url:'/pages/order_pay/order_pay'})
}
</script>

<style scoped lang="scss">
.kk{
  padding-bottom: 110rpx;
}
.container {
  padding-bottom: 320rpx;
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.profile {
  height: 155rpx;
  padding: 40rpx 0;
  border-radius: 0 0 40rpx 50rpx;
  background-color: #0081ff;

}

.bg-set {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f4f4f4;
  z-index: -1;
}

.address,
.call {
  display: flex;
  align-items: center;
}

.btn {
  text-align: center;
  width: 100rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 24rpx;
  color: #fff;
  background-color: #1890ff;
}

.mode {
  width: 100rpx;
  height: 50rpx;
  border-radius: 24rpx;
  text-align: center;
  line-height: 50rpx;
  color: #0081ff;
  background-color: #cce6ff;
}

.btnpay {
  display: flex;
  text-align: center;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 111;
  box-shadow: -5rpx -4rpx 5px 0rpx rgba(0,0,0,0.5)  ;
  .btnleft,
  .btnright {
    flex: 1;
    height: calc(80rpx + env(safe-area-inset-bottom) / 2);
    line-height:  calc(80rpx + env(safe-area-inset-bottom) / 2);
  
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    color: #fff;
    background-color: #2979ff;
  }

  .btnleft {
    color: black;
    background-color: #fff;
  }
}</style>